<template>
	<view class="m-change-main">

		
		<!-- 逻辑在这里 -->
		
<!-- 		<view class="attr-update-btn" v-if="showUpdateBtn" @click="handleChangeBaseWait">
			<view class="btn-content isUpdated" v-if="isNowWaitPage">已更换</view>
			<view class="btn-content" v-else>更 换</view>

		</view> -->
		
		<view class="bottom-choose-base">
			<view class="main-list" >
				<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
					<view class="main-item" :class="{acitveItem:actIndex== index}"
						v-for="(item, index) in dataList" :key="index"
						@click="handlerMainItemClick(item,index)">
						<view class="item-content">
							<image class="item-image" :class="{isSelected:actIndex==index}"
								:src="item.image" mode="widthFix"></image>
						</view>
						<view class="name">{{item.name}}</view>
			
						<view class="locked-masker" v-if="item.locked">
							<image class="locked-icon"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
								mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="change-btn">
				<view class="btn-content" v-if="!isNowWaitPage" @click="handleChangeBaseWait">{{buttonText}}</view>
				<view class="btn-content change-now" v-else>{{buttonText}}</view>
			</view>
		</view>
		
		
<!-- 		<video src="https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241016/VIDd634c859/VIDd634c859.mp4"
			class="pkVideo" object-fit="cover" autoplay="true" :controls="false" :loop="true"></video> -->
		
		
		
		
		



	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";
	// import mClothesChoose from '@/components/m-clothes-choose/index.vue'
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: ""
			}

		},
		computed: {
			...mapGetters(["globalGameCtx", "curStoryId"]),
			isNowWaitPage() {
				// 当前活跃数据的名称和时间，是否跟 roleName、initialTime一致
				let actRoleName = this.actMainData.roleName?this.actMainData.roleName:""
				let actInitialTime = this.actMainData.seekTime?this.actMainData.seekTime:0
				if (actRoleName==this.roleName&&actInitialTime==this.initialTime) {
					return true
				} else {
					return false
				}
			},
			buttonText(){
				let btnText = ""
				if(this.isNowWaitPage){
					btnText = "当前主页"
				}else{
					if(this.actMainData.locked){
						btnText = "去获取"
					}else if(!this.actMainData.locked){
						btnText = "确定"
					}
				}
				
				return btnText
			}
		},
		watch:{
			curStoryId: {
				handler(newVal, oldVal) {
					if (newVal === this.storyId) {
						let storyData = this.globalGameCtx.nextStorySet[newVal]
						let homeSetting = this.globalGameCtx.homeSetting
						let sectionsConfig = storyData.sectionsConfig
						this.dataList = sectionsConfig.map((item, index) => {
				
							return {
								name: item.sectionName,
								image: item.coverImgUrl,
								seekTime: item.sectionStartTime,
								roleName: item.roleName,
								isDefault: !item.isDefault ? false : true,
								locked: !item.locked ? false : true,
								storyId: !item.storyId ? "" : item.storyId
							}
						})
						
						
						this.dataList.forEach((item,index)=>{
							if (item.seekTime == homeSetting.initialTime) {
								this.actIndex = index
								this.handlerMainItemClick(item,index)
							}
						})
						
					
			
			
					}
				},
				deep: true,
				immediate: true
			},
			globalGameCtx:{
				handler(newVal,oldVal){
					if(this.storyId==this.curStoryId){
						
						let homeSetting = newVal.homeSetting
						this.initialTime = (homeSetting&&homeSetting.initialTime) ?homeSetting.initialTime  : 0
						this.roleName = (homeSetting&&homeSetting.roleName)?homeSetting.roleName:""
					}
				},
				deep: true,
				immediate: true
			}
		},
		components: {
			// mClothesChoose
		},
		data() {
			return {
				actIndex:-1,
				dataList:[
					{
						name: "火辣秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/71ee11eebf0c4f6d8a1a94368cdce6ba.jpg",
						seekTime: 0,
						roleName: "香奈",
						isDefault: true,
						storyId: "",
						locked: false,
					},
					{
						name: "制服诱惑",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e9ef7b1cf524c09acb62c202ea4f262.jpg",
						seekTime: 9,
						roleName: "咏美",
						isDefault: true,
						storyId: "",
						locked: false,
					},
					
					{
						name: "清纯可爱",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68075b52d7764ff2b5cf3d8d04856188.jpg",
						seekTime: 17,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "邻家女孩",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/967231e3cd9c42b9886f9f5b3fedd524.jpg",
						seekTime: 27,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "青春活力",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6240f630ff6e493a976dcc255af78b6a.jpg",
						seekTime: 34,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
		
				],
				initialTime: 0,
				actMainData: {},
				roleName: "",

			}
		},
		methods: {
			handlerMainItemClick(item,index){
				this.actIndex = index
				this.actMainData = {...item}
				
			
				this.$emit("getGameResult", Number(this.actMainData.seekTime))

			
			},
			seekTime(e) {
				this.$emit("getGameResult", Number(e))
			},
			handleChangeBaseWait() {
				if (!this.isNowWaitPage && this.actMainData.storyId&&!this.actMainData.locked) {
					this.$emit('getGameResult', {
						storyId: this.actMainData.storyId,
						initialTime: this.actMainData.seekTime,
						roleName: this.actMainData.roleName
					})
				}else if(!this.isNowWaitPage && this.actMainData.storyId&&this.actMainData.locked){
				}

			}


		}
	}
</script>

<style lang="scss" scoped>
	.m-change-main {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 99999999;
		
		pointer-events: none;
		
		
		.pkVideo {
			position: absolute;
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			z-index: 1;
		}
		
		.bottom-choose-base{
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100%;
			// height: 500rpx;
			background-color: rgba(255, 255, 255, 0);
			backdrop-filter: blur(15rpx);
			pointer-events: fill;
			z-index: 10;
			padding-top: 10rpx;
			
			
			.main-list {
				width: 100%;
				height: 270rpx;
			
				.scroll-content {
					width: 100%;
					height: 270rpx;
					// background-color: red;
					// background-color: rgba(0, 0, 0, .3);
			
					.main-item {
						position: relative;
						box-sizing: border-box;
						display: inline-block;
						width: 142.5rpx;
						height: 250rpx;
						// background-color: gold;
						margin-right: 2rpx;
						// margin-top: 20rpx;
						// border-radius: 15rpx;
						border-radius: 8rpx;
			
						border: 2rpx solid transparent;
						overflow: hidden;
			
						&:first-child {
							margin-left: 15rpx;
						}
			
						&:last-child {
							margin-right: 10rpx;
						}
			
						.locked-masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, .3);
							display: flex;
							justify-content: center;
							align-items: center;
			
							.locked-icon {
								width: 40rpx;
								height: 40rpx;
							}
						}
			
			
						// border: 2rpx solid #000;
						.item-content {
							width: 100%;
							height: 100%;
							// border-top-left-radius: 15rpx;
							// border-bottom-right-radius: 15rpx;
							border-radius: 8rpx;
							overflow: hidden;
			
			
							.item-image {
								width: 100%;
								height: 100%;
								// border-top-left-radius: 15rpx;
								// border-bottom-right-radius: 15rpx;
								border-radius: 8rpx;
								object-fit: cover;
			
							}
			
							.isSelected {
								animation: selecteAni 0.2s linear;
							}
			
							@keyframes selecteAni {
			
								0% {
									transform: scale(1);
								}
			
			
								50% {
									transform: scale(1.2);
								}
			
								100% {
									transform: scale(1);
								}
			
							}
			
			
						}
			
						.name {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 35rpx;
							font-size: 20rpx;
							font-weight: 700;
							line-height: 35rpx;
							color: #fff;
							text-align: center;
							text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
							background-color: rgba(0, 0, 0, .3);
							border-radius: 0rpx 0rpx 8rpx 8rpx;
			
						}
			
			
			
			
					}
			
					.acitveItem {
						border-color: #fff;
					}
				}
			}
			.change-btn{
				width: 100%;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;
				.btn-content{
					width: 250rpx;
					height: 100%;
					
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 5rpx;
					background-image: linear-gradient(to right, #f3f1c6, #efcf80);
					color: #b27439;
					box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .3);
					
					font-size: 24rpx;
					font-weight: 700;
					line-height: 24rpx;
					text-align: center;
					
				}
				.change-now{
					background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
					color: #646369;
				}
				
			}
							
							
							
			
			
		}

	

		.attr-update-btn {
			position: absolute;
			left: 0rpx;
			bottom: 20rpx;
			box-sizing: border-box;
			width: 100%;
			padding: 0 20rpx;

			.btn-content {
				width: 100%;
				height: 80rpx;
				background-color: #fcd37b;
				color: #b27439;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 80rpx;
				text-align: center;
				border-radius: 15rpx;
			}

			.isUpdated {
				background-color: #beb3ad;
				color: #fff;
			}

		}

	}
</style>